<template>
	<view>
		<scroll-view scroll-y="true" class="main">
			<view class="content">
				<text class="title box">
					{{newsDetail.title}}
				</text>
				<view class="read">
					<text>{{newsDetail.readNum}}阅读</text>
					<text>|</text>
					<text>发布于{{newsDetail.publishDate}}</text>
				</view>
				<view class="news-content">
					<image :src="this.$baseUrl + newsDetail.cover" mode="" class="news-img"></image>
					<rich-text :nodes="newsDetail.content"></rich-text>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
				<view class="recommend">
					<text class="title box">新闻推荐</text>
					<view class="recommend-list">
						<view class="recommend-item" v-for="item in recommendList">
							<view class="left">
								<text class="name">{{item.title}}</text>
								<view class="bottom">
									<text>{{item.readNum}} 看过</text>
									<text>{{item.likeNum}} 点赞</text>
								</view>
							</view>
							<navigator url="" class="right">
								<image :src="$baseUrl + item.cover" mode=""></image>
							</navigator>
						</view>
					</view>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
				<view class="review">
					<text class="title">{{total}}条评论</text>
					<view class="review-list">
						<view class="review-item" v-for="item in reviewList">
							<view class="left">
								<u-avatar :src="src" size="80"></u-avatar>
							</view>
							<view class="right">
								<view class="top">
									<text class="name">{{item.userName}}</text>
									<view class="thumb">
										<u-icon name="thumb-up"></u-icon>
										<text>{{item.likeNum}}</text>
									</view>
								</view>
								<text class="content">{{item.content}}</text>
								<text class="date">{{item.commentDate}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bar">
			<input type="text" placeholder="请输入评论内容" @click="show=true">
			<view class="other">
				<u-icon name="chat" class="icon"></u-icon>
				<text>{{newsDetail.commentNum}}</text>
				<u-icon name="thumb-up" class="icon" size="45"></u-icon>
				<text>{{newsDetail.likeNum}}</text>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" class="popup">
			<view class="content">
				<textarea placeholder="字数限制150字" auto-height="true" v-model="value" @input="input"></textarea>
				<button @click="submit" :disabled="disabled" :class="disabled === true ? '' : 'active'">发送</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsDetail: () => {},
				recommendList: [],
				src: '',
				reviewList: [],
				total: 0,
				show: false,
				value: '',
				disabled: true
			};
		},
		onLoad(option) {
			this.getNews(option.id)
			this.getRecommend()
		},
		methods: {
			submit(){
				this.$request({
					url: '/prod-api/press/pressComment',
					method: 'POST',
					data: {
						content: this.value,
						newsId: this.newsDetail.id
					}
				}).then(res => {
					console.log(res)
					this.getReview()
					this.show = false
				})
			},
			input(){
				if(this.value !== ''){
					this.disabled = false
				}else{
					this.disabled = true
				}
			},
			getNews(id) {
				this.$request({
					url: `/prod-api/press/press/${id}`
				}).then(res => {
					console.log(res)
					this.newsDetail = res.data
					this.getReview()
					uni.setNavigationBarTitle({
						title: this.newsDetail.title
					})
				})
			},
			getRecommend() {
				this.$request({
					url: '/prod-api/press/press/list',
					data: {
						top: 'Y'
					}
				}).then(res => {
					console.log(res)
					this.recommendList = res.rows
				})
			},
			getReview() {
				console.log(this.newsDetail.id + '===');
				this.$request({
					url: '/prod-api/press/comments/list?newsId=' + this.newsDetail.id
				}).then(res => {
					console.log(res)
					this.total = res.total
					this.reviewList = res.rows.sort((a, b) => {
						return new Date(b.commentDate).getTime() - new Date(a.commentDate).getTime()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {

		// height: 100%;
		view {
			// height: 100%;
			display: flex;
			flex-direction: column;

			.main {
				background-color: #fff;
				height: 1116rpx;

				.content {
					height: fit-content;

					.title {
						// padding: 20rpx;
						font-size: 36rpx;
						font-weight: bold;
						line-height: 1.8;
					}

					.read {
						padding: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: start;
						margin-top: 20rpx;

						text {
							margin-left: 20rpx;
							font-size: 22rpx;
							color: #666;

							&:first-child {
								margin-left: 0;
							}
						}
					}

					.news-content {
						padding: 20rpx;
						color: #303133;
						line-height: 1.8;

						uni-image {
							width: 100%;
							margin-top: 20rpx;
						}

						rich-text {
							margin-top: 20rpx;
						}
					}

					.recommend {
						padding: 20rpx;

						.title {
							font-size: 36rpx;
							font-weight: bold;
						}

						.recommend-list {
							display: flex;
							flex-direction: column;

							.recommend-item {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								border-top: 2rpx solid #e4e7ed;
								padding: 20rpx 0;

								.left {
									.name {
										width: 460rpx;
										height: 168rpx;
										font-size: 32rpx;
										font-weight: bold;
										line-height: 1.5;
									}

									.bottom {
										font-size: 22rpx;
										color: #666;
										display: flex;
										flex-direction: row;
										justify-content: start;

										text {
											margin-left: 20rpx;

											&:first-child {
												margin-left: 0;
											}
										}
									}
								}

								.right {
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 250rpx;
										height: 200rpx;
									}
								}
							}
						}
					}

					.review {
						.title {
							padding: 20rpx;
							font-size: 36rpx;
							font-weight: bold;
							line-height: 1.7;
						}

						.review-list {
							display: flex;
							flex-direction: column;
							padding: 20rpx;

							.review-item {
								display: flex;
								flex-direction: row;
								padding: 20rpx 0;
								border-top: 2rpx solid #e4e7ed;

								// justify-content: space-between;
								.left {}

								.right {
									display: flex;
									flex-direction: column;
									flex: 1;
									margin-left: 20rpx;

									.top {
										display: flex;
										flex-direction: row;
										justify-content: space-between;
										height: 80rpx;

										.name {
											color: black;
											font-size: 35rpx;
										}

										.thumb {
											display: flex;
											flex-direction: row;
											font-size: 40rpx;
											margin-right: 20rpx;

											text {
												display: flex;
												justify-content: center;
												align-items: center;
												font-size: 30rpx;
												margin-left: 10rpx;
												color: #82848a;
											}
										}
									}

									text {
										font-size: 28rpx;
										color: #303133;
										line-height: 1.5;
									}

									.date {
										color: #666;
										font-size: 22rpx;
									}

									.content {
										height: 168rpx;
										color: #303133;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 4;
										overflow: hidden;
									}
								}
							}
						}
					}
				}
			}

			.bar {
				height: 100rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: #f4f4f5;

				input {
					width: 380rpx;
					height: 60rpx;
					background-color: #e4e7e6;
					border-radius: 5rpx;
					padding-left: 20rpx;
				}

				.other {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #909399;
					font-size: 22rpx;

					.icon {
						margin-left: 20rpx;
						font-size: 50rpx;
					}

					text {
						margin-left: 20rpx;
						color: #666;
					}
				}
			}
			.popup{
				.content{
					padding: 20rpx;
					background-color: #fff;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					textarea{
						padding: 20rpx;
						width: 500rpx;
						min-height: 80rpx;
						background-color: #f2f2f2;
					}
					button{
						width: 120rpx;
						height: 80rpx;
						font-size: 28rpx;
						color: white;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c8c9cc;
					}
					.active{
						background-color: #2979ff;
					}
				}
			}
		}
	}
</style>